<template>
  <div class="common-layout">
    <el-container>
      <el-header style="height: 350px">
        <div class="common-layout">
          <el-container>
            <el-aside width="300px">
              <div>
                <img
                  :src="Rear.proDuctionImages"
                  style="width: 300px; height: 300px"
                />
              </div>   
            </el-aside>
            <el-main>
              <table>
                <tr style="float: left 35px; width: 1001px">
                  <h1>
                    <td>
                      <b style="font-size: 50px">{{ Rear.goodsName }}</b>
                    </td>
                    <td v-if="from.num==1">
                      <vue-qrcode
                        value="http://localhost:5173/"
                        :width="100"
                      ></vue-qrcode>
                    </td>
                    <el-button @click="GETThey()">导出</el-button>
                  </h1>
                </tr>
                <tr style="float: left 35px">
                  <td>生产批次：{{ Rear.productionBath }}</td>
                  <td>保质期：{{ Rear.expirationtime }}天</td>
                </tr>
                <tr style="float: left 35px">
                  <td>生产许可证号：{{ Rear.proDuctionNum }}</td>
                  <td>生产企业：{{ Rear.proDuctionenterprise }}天</td>
                </tr>
                <tr style="float: left 35px">
                  <td>
                    产品检验报告
                    <el-dialog
                      v-model="dialogFormVisible"
                      title="添加图片"
                      width="500"
                    >
                      <el-form :model="from">
                        <el-upload
                          class="avatar-uploader"
                          action="https://localhost:7116/api/SourceController1/GETimages"
                          :show-file-list="false"
                          :on-success="handleAvatarSuccess"
                          :before-upload="beforeAvatarUpload"
                        >
                          <img
                            v-if="from.getimages"
                            :src="from.getimages"
                            class="avatar"
                          />
                          <el-icon v-else class="avatar-uploader-icon"
                            ><Plus
                          /></el-icon>
                        </el-upload>
                      </el-form>
                      <template #footer>
                        <div class="dialog-footer">
                          <el-button @click="getLeadingCommentRanges()"
                            >确认</el-button
                          >
                          <el-button
                            type="primary"
                            @click="dialogFormVisible = false"
                          >
                            取消
                          </el-button>
                        </div>
                      </template>
                    </el-dialog>
                  </td>
                </tr>
                <tr>
                  <td>
                    <!-- <el-icon :size="20">
                    <CircleClose />
                  </el-icon> -->
                    <div :style="{ width: leftShowWith.with }">
                      <div v-for="item in fileList" style="width: 100%">
                        <el-button
                          class="images"
                          type="danger"
                          :icon="Delete"
                          circle
                          @click="deel(item.putImages, item.productionimagesid)"
                        ></el-button>
                        <img
                          style="width: 130px; height: 130px"
                          class="buttonss"
                          :src="item.putImages"
                        />
                      </div>
                    </div>
                  </td>
                  <td>
                    <el-button
                      list-type="picture-card"
                      @click="GETimages()"
                      style="width: 120px; height: 120px"
                    >
                      <el-icon><Plus /></el-icon>
                    </el-button>
                  </td>
                </tr>
              </table>
            </el-main>
          </el-container>
        </div>
      </el-header>
      <el-main>
        <el-button text @click="Gobreed()">养殖信息(/5)</el-button>
        <el-button text @click="slaughter()">屠宰信息(/4)</el-button>
        <el-button text @click="GoDeep()">深加工(/5)</el-button>
        <br />
        <RouterView></RouterView>
      </el-main>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import axios from 'axios';
import { onMounted, reactive, ref } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import type { UploadProps, UploadUserFile } from 'element-plus';
import { ElMessage } from 'element-plus';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star
} from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const dialogTableVisible = ref(false);
const dialogFormVisible = ref(false);
const formLabelWidth = '140px';
const fileList = ref([]);
const from = reactive({
  ProductionImages: [],
  getimages: '',
  num:0
});

onMounted(() => {
  RearGet();
});
// 在vue中添加动态变量：
const leftShowWith = reactive({
  with: '0px'
});

const Rear = ref({});
const RearGet = () => {
  var ProDuctionBasicid = localStorage.getItem('Details');
  axios
    .post('https://localhost:7116/api/SourceController1/GoosMess', {
      ProDuctionBasicid: Number(ProDuctionBasicid)
    })
    .then((res) => {
      Rear.value = res.data.data;
      fileList.value = res.data.data.cultureRevealGETiamges;
      console.log(fileList.value, 'yyyyyyyyyyyy');

      // 动态修改宽度
      leftShowWith.with = `${fileList.value.length * 150}px`;
    });
};

const GETimages = () => {
  dialogFormVisible.value = true;
};

const getLeadingCommentRanges = () => {
  var proDuctionid = localStorage.getItem('Details');
  axios
    .post('https://localhost:7116/api/SourceController1/Handle', {
      getneWimages: from.getimages,
      proDuctionBasicid: Number(proDuctionid)
    })
    .then((res) => {
      if (res.data.data > 0) {
        dialogFormVisible.value = false;
        RearGet();
      }
      if (res.data.data == -7) {
        ElMessage.error('最多只能添加6条');
      }
    });
};

const deel = (imagest: any, ProductionImagesid: number) => {
  var ProductionImagesids = localStorage.getItem('Details');

  axios
    .post('https://localhost:7116/api/SourceController1/Deel', {
      ProDtctionid: Number(ProductionImagesids),
      images: imagest
    })
    .then((res) => {
      if (res.data.code == 0) {
        ElMessage.success('删除成功');
        RearGet();
      }
    });
};

const dialogImageUrl = ref('');
const dialogVisible = ref(false);

const handleAvatarSuccess = (url: any) => {
  from.getimages = 'https://localhost:7116' + url;
};

const beforeAvatarUpload = (rawFile: any) => {
  if (
    rawFile.type !== 'image/jpeg' &&
    rawFile.type !== 'image/jpg' &&
    rawFile.type !== 'image/png'
  ) {
    ElMessage.error('Avatar picture must be JPG format!');
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!');
    return false;
  }
  return true;
};

//养殖
const Gobreed = () => {
  router.push('/Culturehtml');
};

//屠宰
const slaughter = () => {
  router.push('/Slaughtering');
};

//深加工
const GoDeep = () => {
  router.push('/Deepprocessing');
};


const GETThey=(()=>{

from.num=1;

})
</script>

<style scoped>
.images {
  top: 0px;
  width: 20px;
  height: 20px;
  float: left;
  left: 120px;
  z-index: 2;
  position: relative;
  cursor: pointer;
}
.buttonss {
  float: left;
  z-index: 1;
  border: none;
}
</style>
